<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name='format-detection' content='telephone=no' />
<title>人车人</title>
<link rel="icon" href="/assets/img/titleico.ico" type="image/x-icon">
<link rel="stylesheet" href="/assets/css/common.css" />
<style>
	body {
		background-color: #fff;
	}
	
	header {
		height: 40px;
		overflow: hidden;
		position: relative;
		border-bottom: 8px solid #f2f2f2;
	}
	
	header h2 {
		text-align: center;
		line-height: 40px;
		font-weight: normal;
		font-size: 18px
	}
	
	header .icon {
		width: 30px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-align-items: center;
		align-items: center;
    	-webkit-justify-content: flex-end;
    	justify-content: flex-end;
    	padding-right: 19px
	}
	
	header .user {
		right: 0;
		left: inherit;
		padding-right: 19px;
	}
	
	header .icon img {
		width: 12px;
	}
	
	header .user img {
		width: 20px;
	}
	
	header .user a {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	
	section {
		padding: 0 19px;
		font-size: 14px;
	}
	
	section .header {
		height: 40px;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	
	section .center {
		-webkit-align-items: center;
		align-items: center;
	}
	
	section .header img {
		width: 20px;
	}
	
	section .inputbox {
		height: 50px;
		position: relative;
	}
	
	section .inputbox select { 
		height: 23px;
		width: 145px;
		border: 1px solid #c2c9cc;
		-webkit-box-shadow: none;
		box-shadow: none;
		color: #666;
		text-indent: 10px;
		font-size: 14px;
		background-color: transparent;
	}
	
	section .inputbox input {
		height: 23px;
		width: 145px;
		border: 1px solid #c2c9cc;
		color: #666;
		text-indent: 10px;
		border-radius: 4px;
		font-size: 14px;
	}
	
	section .inputbox span.title {
		color: #666;
		width: 76px;
	}
	
	section .inputbox .icon {
		position: absolute;
		border-left: 1px solid #c2c9cc;
		border-radius: 4px;
		-webkit-justify-content: center;
		justify-content: center;
		width: 24px;
	    height: 23px;
	    left: 196px;
	    z-index: -1;
	    top: 50%;
    	margin-top: -11.5px;
	}
	
	section .inputbox .tip {
		position: absolute;
		left: 192px;
		font-size: 12px;
		color: #b3b3b3;
		top: 50%;
    	margin-top: -8px;
	}
	
	section .inputbox .icon img {
		width: 15px;
	}
	
	section a.submit {
		display: block;
		margin-top: 46px;
		margin-bottom: 53px;
		width: 100%;
		height: 43px;
		line-height: 43px;
		color: #fff;
		background-color: #b3b3b3;
		font-size: 18px;
		text-align: center;
		border-radius: 6px;
		position: relative;
	}
	
	section a.submit.suc {
		background-color: #f6a32d;
	}
	
</style>
</head>
<body>
	<header>
		<div class="icon flexbox" id="back"><img src="/assets/img/order_back.png" /></div>
		<h2>新增订单</h2>
		<div class="icon user flexbox" id="back"><a href="#"></a><img src="/assets/img/order_user.png" /></div>
	</header>
	#@loadContainer()	
	<section id="app" class="visiblecon sectrans">
		<div class="header b_bor center flexbox">
			<span>新增订单</span>
			<img src="/assets/img/order_fail.png" />
		</div>
		<div class="input-wrapper" id="input-wrapper"></div>
		<a class="submit">下一页</a>
	</section>
	
	<script src="/assets/js/fastclick.min.js"></script>
	<script src="/assets/js/jquery-3.1.1.min.js"></script>
	<script src="/assets/js/axios.min.js"></script>
	<script src="/assets/js/xxsg.js"></script>
	<script>
		$(function(){
			var app = $("#app"),
				inputWrapper = $("#input-wrapper")
			
			$('#back').click(function(){
		    	window.history.go(-1);
		    });
			
			axios.post("/makeprice/getJson/1")
			.then(function(res){
				console.log(res.data)
				renderInput(res.data, show)
			})
			
			function show () {
				app.removeClass("visiblecon");
    			$("#load-container").removeClass("load7");
			}
			
			function renderInput (data, fn) {
				var html = ""
				for (var i = 0; i < data.length; i++) {
					html += "<div class='inputbox b_bor center flexbox'><span class='title'>"+ data[i].zhExpl +"：</span>"
					if (data[i].iputType === "select") {
						html += "<select name='"+ data[i].paramterName +"' class='input-hook'><option value=''>未选择</option>"
						
						if (!_x.isEmpty(data[i].selectValue)) {
							var selectArr = data[i].selectValue.split(",")
							for (var j = 0; j < selectArr.length; j++) {
								html += "<option value='"+ selectArr[j] +"'>"+ selectArr[j] +"</option>"
							}
						}
						html += "</select>"
					} else if (data[i].iputType === "text") {
						var maxLen = ""
						if (!_x.isEmpty(data[i].length)) {
							maxLen = "max-length='"+ data[i].length +"'"
						}
						html += "<input type='text' "+ maxLen +" class='input-hook "+ data[i].paramterName +"' name='"+ data[i].paramterName +"' />"
					} else if (data[i].iputType === "number") {
						var maxLen = ""
						if (!_x.isEmpty(data[i].length)) {
							maxLen = "max-length='"+ data[i].length +"'"
						}
						html += "<input type='tel' "+ maxLen +"  class='input-hook' name='"+ data[i].paramterName +"' />"
					}
					html += "</div>"
				}
				inputWrapper.html(html)
				fn()
			}
			
			function getTerm (itemType) {
				axios.get("/makeprice/getTermList", {
					params: {
						itemType: itemType
					}
				}).then(function(res){
					console.log(res)
					var html = ""
					for (var i = 0; i < res.data.length; i++) {
						var item = res.data[i]
						html += "<option value='"+ item +"'>"+ item +"期</option>"
					}
					inputWrapper.find("select[name=term]").append(html)
				})
			}
			
			// 选择产品
			inputWrapper.on("change", "select[name=itemType]", function(){
				var val = $(this).val()
				inputWrapper.find("select[name=term]").html("<option value=''>未选择</option>")
				if (!_x.isEmpty(val)) {
					getTerm(val)
				}
			})
			
			
			app.children("a.submit").click(function(){
				var mark = validate(false),
					that = $(this)
					
				if (mark) {
					var data = {}
					that.html("<div class='textloading'></div>")
					app.find(".input-hook").each(function(){
						var key = $(this).attr("name"),
							val = $(this).val()
						data[key] = val
					})
					
					axios.post("/makeprice/submitOrder", _x.qsStringify(data))
					.then(function(res){
						if (res.data.code == 1) {
							var localData = window.localStorage.getItem("order_id");
							if(_x.isEmpty(localData)){
								localData = [data.order_id];
							}else{
								localData = localData.split(",");
								localData.push(res.data.order_id)
							}
							window.localStorage.setItem("order_id",localData);
							_x.showTip("提交成功！",{url: "/userCenter/firstTrial/" + res.data.order_id});
						}
					})
					.catch(function(){
						_x.showTip("申请失败，请稍后重试！");
						that.html("下一页")
					})
				}
			})
			
			app.on("change", ".input-hook", function(){
				if (validate(true)) {
					app.children(".header").children("img").attr("src", "/assets/img/order_suc.png")
					app.children("a.submit").addClass("suc")
				} else {
					app.children(".header").children("img").attr("src", "/assets/img/order_fail.png")
					app.children("a.submit").removeClass("suc")
				}
			})
			
			//type true验证状态 false验证提示
			function validate (type) {
				var mark = true
				app.find(".input-hook").each(function(){
					var that = $(this),
						val = that.val().trim()
					if (_x.isEmpty(val)) {
						mark = false
						if (!type) {
							var tipMsg = ""
							if (that[0].tagName === "SELECT") {
								tipMsg = "请选择" + that.siblings("span.title").html().replace("：","") + "！"
							} else if (that[0].tagName === "INPUT") {
								tipMsg = (that.siblings("span.title").html().replace("：","")) + "不能为空！"
							}
							_x.showTip(tipMsg)
						}
						return false
					}
					
					var paramterName = that.attr("name")
					
					if (paramterName === "phone") {
						if (!(/^1[3|4|5|7|8]\d{9}$/.test(val))) {
							mark = false
							if (!type) {
								_x.showTip((that.siblings("span.title").html().replace("：","")) + "输入有误！")
							}
							return false
						}
					}
					
					if (that.hasClass("idNo")) {
						if (!(/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(val))) {
							mark = false
							if (!type) {
								_x.showTip((that.siblings("span.title").html().replace("：","")) + "输入有误！")
							}
							return false
						}
					}
				})
				return mark
			}
			
			return
			//选择
			$("#Operator").change(function(){
				var val = $(this).val()
				$(this).parent().nextAll(".selbox-hook").children("select").html("<option value=''>未选择</option>")
				if (_x.isEmpty(val)) {
					return
				}
				val = val.split("#")[0]
				
				var html = "<option value=''>未选择</option>"
					selectValue = map[val].selectValue.split(","),
					values = map[val].values.split(",")
					
				for (var i = 0; i < selectValue.length; i++) {
					html += "<option value='"+ values[i] +"#"+ selectValue[i] +"'>"+ selectValue[i] +"</option>"
				}
				
				$("#itemType").html(html)
			})
			
			$("#itemType").change(function(){
				var val = $(this).val()
				$(this).parent().nextAll(".selbox-hook").children("select").html("<option value=''>未选择</option>")
				if (_x.isEmpty(val)) {
					return
				}
				
				val = val.split("#")[0]
				var html = "<option value=''>未选择</option>"
					selectValue = map[val].selectValue.split(","),
					values = map[val].values.split(",")
					
				for (var i = 0; i < selectValue.length; i++) {
					html += "<option value='"+ values[i] +"#"+ selectValue[i] +"'>"+ selectValue[i] +"期</option>"
				}
				
				$("#term").html(html)
			})
			
			$("#term").change(function(){
				var val = $(this).val()
				if (_x.isEmpty(val)) {
					return
				}
			})	
		})
	</script>
</body>
</html>
